<template>
  <span >
      <div style="display: flex">
        <el-tag class="tagbuttons-ele tag-single small stickTop">
            {{ theSubPhrase.phraseOWordText }}
        </el-tag>
        <button v-if="cptCurrEditing" class="tagbuttons-ele button-single stickTop">
            <el-icon>
                <Close/>
            </el-icon>
        </button>

        <el-popover v-if="cptCurrEditing" placement="bottom-start" :width="`fit-content`" trigger="click" :visible="remarkVisible">
            <template #reference>
                <button class="tagbuttons-ele button-single stickTop"
                        @click="remarkVisible = !remarkVisible">
                      <el-icon><Plus/></el-icon>Rmk.
                  </button>
                <!--                <button class="tagbuttons-ele narrow" @click="remarkVisible = !remarkVisible"><el-icon><Plus/></el-icon>Rmk.</button>-->
            </template>
            <div>
                <IntegretedRichTextEditor :thePopVisible="remarkVisible"
                                          :remarksAll="theSubPhrase.remarksAll"></IntegretedRichTextEditor>
            </div>
        </el-popover>
      </div>
        <div style="display: flex">
            <RemarkHoverEnlargable v-for="(remark,idx) in theSubPhrase.remarksAll" :contentHtmlStr="remark" :idxInRemarks="idx" @deleteClicked="theSubPhrase.remarksAll.splice(idx,1)">
            </RemarkHoverEnlargable>
        </div>
  </span>

</template>

<script setup>
import {defineProps, defineEmits, ref} from "vue";
import {Close, Plus} from "@element-plus/icons-vue";
import IntegretedRichTextEditor from "@/components/IntegretedRichTextEditor.vue";
import RemarkHoverEnlargable from "@/components/RemarkHoverEnlargable.vue";

const props = defineProps(["theSubPhrase", "cptCurrEditing"]);
const remarkVisible = ref(false);

</script>

<style scoped>

</style>